<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>常见问题分类</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />

</head>
<style>
    body{
        height: 100% ;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        background-color: #fff;
    }
    .form-title {
        height: 50px;
        text-align: right;
    }
    .checkHead table .form-value input{
        height: 34px;
        width: 200px;
    }
    #record-table tr td {
        vertical-align: inherit;
    !important;
    }
    .delete_a{
        cursor: pointer;
    }
    .bootstrap-table{
        height:100% !important;
    }
    .fixed-table-container{
        height:calc(100% - 115px) !important;
    }

    img {
        width: 75px;
        height: 75px;
        max-width: 75px;
        /*_width: expression(this.width > 75 ? "37.5px" : this.width);*/
    }
    .save_btn{
        background: #62a8d1;
        border: 1px solid #62a8d1;
    }
    .save_btn:hover{
        background: #62a8d1;
        border: 1px solid #62a8d1;
    }

    .file {
        position: relative;
        display: inline-block;
        background: white;
        border: 1px solid #999;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #333;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        top: 7px;
        left: 10px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

    .file:hover {
        background: white;
        border-color: #78C3F3;
        color: #666;
        text-decoration: none;
    }
    .checkHead-table .form-value input{
        border-radius: 0;
    }
</style>
<body>
<div id="content">
    <!--搜索-->
    <div class="checkHead form-inline" id="checkHead" style="padding-top: 10px;" >
        <button class="btn btn-default form-group save_btn" v-on:click = "showAddType">
            <i class="icon-plus align-top bigger-125"></i>
            添加
        </button>
        <table class="checkHead-table form-group" style="margin-left: calc(100% - 550px)">
            <tr>
                <td class="form-title">
                    问题分类名称：
                </td>
                <td class="form-value">
                    <input v-model="qname" type="text" class="search" placeholder="请输入问题分类名称"/>&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                <td>
                    <button class="btn btn-default" v-on:click ="searchs">
                        <i class="icon-refresh align-top bigger-125"></i>
                        查询
                    </button>
                    <button class="btn btn-default" v-on:click = "reset">
                        <i class="icon-reply align-top bigger-125"></i>
                        重置
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <!-- 查看问题详情 -->
    <div class="modal fade" id="faqTypeModal" tabindex="-1" role="dialog" aria-labelledby="faqTypeModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="faqTypeModalLabel">问题分类详情</h4>
                </div>
                <div class="modal-body">
                    <table class="checkHead-table">
                        <tr>
                            <td class="form-title">
                                图标：
                            </td>
                            <td class="form-value">
                                <img class="editImg" :src="path + json_data.icon">
                                <a href="javascript:;" class="file"><i class="icon-folder-open align-top bigger-125"></i>&nbsp;选择文件

                                    <form enctype="multipart/form-data">
                                        <input type="file" @change="uploadImg" name="image" style="">
                                    </form>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title">
                                分类名称：
                            </td>
                            <td calss="form-value">
                                <input v-model="json_data.name" type="text" class="search form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title">
                                分类英文名称：
                            </td>
                            <td calss="form-value">
                                <input v-model="json_data.name_english" type="text" class="search form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title">
                                状态：
                            </td>
                            <td v-if="json_data.status == 1">
                                <input name="save_status" type="radio" value="1" checked>显示
                                <input name="save_status" type="radio" value="0" >隐藏
                            </td>
                            <td v-else>
                                <input name="save_status" type="radio" value="1">显示
                                <input name="save_status" type="radio" value="0" checked >隐藏
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="saveTypeInfo()">
                        保存
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" >
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!--添加问题 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="saveModalLabel">添加问题分类：</h4>
                </div>
                <div class="modal-body">
                    <table class="checkHead-table">
                        <tr>
                            <td class="form-title">
                                图标：
                            </td>
                            <td class="form-value">
                                <img class="editImg saveImg" src="" style="display: none;">
                                <a href="javascript:;" class="file"><i class="icon-folder-open align-top bigger-125"></i>&nbsp;选择文件
                                    <form enctype="multipart/form-data">
                                        <input type="file" @change="uploadImg" name="image" style="">
                                    </form>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title">
                                分类名称：
                            </td>
                            <td calss="form-value">
                                <input v-model="json_data.name" type="text" class="search form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title">
                                分类英文名称：
                            </td>
                            <td calss="form-value">
                                <input v-model="json_data.name_english" type="text" class="search form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title">
                                状态：
                            </td>
                            <td >
                                <input name="status" type="radio" value="1" checked="checked"/>显示
                                <input name="status" type="radio" value="0" >隐藏
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="addType">
                        保存
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" >
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="table-responsive" style="height:100%;background:white;margin-top: 0px;">
    <table class="table" id="record-table"></table>
</div>
</body>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/vue-resource.js"></script>
<script type="text/javascript" charset="utf-8" src="__JS__/supplies/layer/layer.js"></script>
<script>
    var qname;
    var tableheight = document.documentElement.clientHeight - 150;
    $('#record-table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Sundry/faqTypeList")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                align: 'left',
                title: '序号'
            }, {
                field: 'name',
                align: 'left',
                title: '问题分类名称'
            }, {
                field: 'icon',
                align: 'center',
                valign: 'middle',
                title: '图标',
                width: 200,
                formatter: function (val, row, index) {
                    return "<img src='"+oss_url+val+"'>"
                }
            }, {
                field: 'status',
                align: 'center',
                title: '状态'
            }, {
                field: 'create_time',
                align: 'center',
                title: '时间'
            }, {
                title: '操作',
                align: 'center',
                width: 260,
                formatter: operateFormatter
            }
        ],
        queryParams: function (params) {
            var param = {
                name:qname,
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });

    var vm = new Vue({
        el:"#content",
        data:{
            qname:"",
            json_data : {},
            type_data : {},
            id : '',
            icon : '',
            path :oss_url,
        },
        created : function () {
            var url = "{:url('admin/Sundry/getproblemType')}";
            this.$http.post(url).then(function (data) {
                this.type_data = data.body.data;
            })
        },
        methods:{
            searchs:function(){
                qname = vm.qname;
                $( "#record-table" ).bootstrapTable( 'refresh' );
            },
            reset:function(){
                vm.qname = "";
            },
            typeDetails : function (id) {
                this.id = id;
                var url = "{:url('admin/Sundry/getFaqTypeInfo')}";
                this.$http.post(url,{
                    id:id,
                }).then(function (data) {
                    this.json_data = data.body.data;
                    console.log(this.json_data);
                });
                $("#faqTypeModal").modal({
                    keyboard:true
                });
            },
            saveTypeInfo : function () {
                var url = "{:url('admin/Sundry/saveFaqTypeInfo')}";
                this.$http.post(url,{
                    id:this.id,
                    name:this.json_data.name,
                    name_english : this.json_data.name_english,
                    icon : this.icon,
                    status : $('input[name=save_status]:checked').val(),
                }).then(function (data) {
                    layer.confirm(data.body.msg, {
                        time: 20000, //20s后自动关闭
                        btn: ['关闭']
                    },function () {
                        layer.closeAll('dialog');
                        $( "#record-table" ).bootstrapTable( 'refresh' );
                    });
                })
            },
            uploadImg: function (e) {
                var fData = new FormData();
                fData.append('image', e.target.files[0]);
                $.ajax({
                    url: "{:url('admin/Sundry/uploadImg')}",
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: fData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        vm.icon = res.data.image;
                        $(".saveImg").show();
                        $(".editImg").attr("src",oss_url+res.data.image);
                    }
                });
            },
            saveImg: function (e) {
                var fData = new FormData();
                fData.append('image', e.target.files[0]);
                fData.append('id', this.id);
                $.ajax({
                    url: "{:url('admin/Sundry/uploadImg')}",
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: fData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        vm.json_data.icon = res.data.image;
                        $(".editImg").attr("src",oss_url+res.data.image);
                    }
                });
            },
            addType: function () {
                var url = "{:url('admin/Sundry/addFaqType')}";
                this.$http.post(url,{
                    name:this.json_data.name,
                    name_english : this.json_data.name_english,
                    status : $('input[name=status]:checked').val(),
                    icon : vm.icon,
                }).then(function (data) {
                    layer.confirm(data.body.msg, {
                        time: 20000, //20s后自动关闭
                        btn: ['关闭']
                    },function () {
                        layer.closeAll('dialog');
                        $( "#record-table" ).bootstrapTable( 'refresh' );
                    });
                })
            },
            showAddType : function () {
                this.json_data = {};
                $("#addModal").modal({
                    keyboard:true
                });
            },
            delType:function (id) {
                layer.config({
                    skin:"my_skin"
                })
                layer.confirm('您确定要删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    var url = "{:url('admin/Sundry/delFaqType')}";
                    vm.$http.post(url,{
                        id:id,
                    }).then(function (data) {
                        layer.confirm(data.body.msg, {
                            time: 20000, //20s后自动关闭
                            btn: ['关闭']
                        },function () {
                            location.reload();
                        });
                    })
                });
            }
        }
    })

    // 详情按钮
    function operateFormatter(val, row, index) {

        var divStr = "<div class='form-inline'>"
        var detailStr = "<a href='javascript:void(0);' class='detail_a' onclick='faqTypeDetails(1," + row.id + ")'>查看详情</a>&nbsp;&nbsp;"+
            "<a href='javascript:void(0);' class='detail_a' onclick='delTypeByid(1," + row.id + ")'>删除</a>";
        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }

    function faqTypeDetails(index , id) {
       vm.typeDetails(id);
    }
    
    function delTypeByid(index , id) {
        vm.delType(id);
    }
</script>
</html>